import './index.css'
import React from 'react'
import Header from './components/Header'
import List from './components/List'
import Footer from './components/Footer'

/*function App() {
  return (
    <div className=="App">
      <header className=="App-header">
        <img src={logo} className=="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className=="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
        Learn React!!!
        </a>
      </header>
    </div>
  );
}
export default App;*/
class Todos extends React.Component {

  //状态在哪，操作状态的方法就在哪

  //初始化状态
  state = { todos: JSON.parse(localStorage.getItem('todos')) || [] }
  //添加一个新的todo,接受的参数是一个todo对象
  addtodo = (todoObj) => {
    const { todos } = this.state
    const newTodo = [todoObj, ...todos]
    localStorage.setItem('todos', JSON.stringify(newTodo))
    this.setState({ todos: newTodo })
  }

  //用于更新一个todo对象
  updatetodo = (id, done) => {
    const { todos } = this.state
    const newTodo = todos.map((todoObj) => {
      if (todoObj.id === id) return { ...todoObj, done: done }
      else return todoObj
    })
    localStorage.setItem('todos', JSON.stringify(newTodo))
    this.setState({ todos: newTodo })
  }

  //用于删除一个todo
  deletetodo = (id) => {
    const { todos } = this.state
    const newtodos = todos.filter((todoObj) => {
      return todoObj.id !== id
    })
    localStorage.setItem('todos', JSON.stringify(newtodos))
    this.setState({ todos: newtodos })
  }

  //用于全选todo
  checkalltodo = (done) => {
    const { todos } = this.state
    const newtodos = todos.map((todoObj) => {
      return { ...todoObj, done }
    })
    console.log(newtodos)
    localStorage.setItem('todos', JSON.stringify(newtodos))
    this.setState({ todos: newtodos })
  }

  //用于清除全部已勾选的
  clearAllTodoDone = () => {
    const { todos } = this.state
    const newtodos = todos.filter((todoObj) => {
      return todoObj.done === false
    })
    localStorage.setItem('todos', JSON.stringify(newtodos))
    this.setState({ todos: newtodos })
  }
  render () {
    const { todos } = this.state

    return (
      <div className="todo-container">
        <div className="todo-wrap">
          <Header addtodo={this.addtodo} />
          <List todos={todos} updatetodo={this.updatetodo} deletetodo={this.deletetodo} />
          <Footer todos={todos} checkalltodo={this.checkalltodo} clearAllTodoDone={this.clearAllTodoDone} />
        </div>
      </div>
    )
  }
}
//暴露Todos组件
export default Todos;